<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include :: header('图表组合')" />

</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">

        <div class="row" th:object="${taskStatistics}">
            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content box-success-bg">
                        <div class="row ">
                            <div class="col-sm-4" style="opacity:0.2">
                                <i class="fa  fa-check-circle fa-5x" style="color: green" aria-hidden="true"></i>
                            </div>

                            <div class="col-sm-8 text-center" style="font-size:20px">
                                <h5>任务成功数</h5>
                                <h1 class="no-margins"><span th:text="${taskStatistics.successNum}"></span></h1>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content box-success-bg">
                        <div class="row">
                            <div class="col-sm-4" style="opacity:0.2">
                                <i class="fa fa-cog fa-spin fa-5x" style="color: #0000CD" aria-hidden="true"></i>
                            </div>
                            <div class="col-sm-8 text-center" style="font-size:20px">
                                <h5>正在运行数</h5>
                                <h2 class="no-margins"><span th:text="${taskStatistics.executingNum}"></span></h2>

                            </div>
                        </div>


                    </div>
                </div>
            </div>
            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content box-success-bg">
                        <div class="row">
                            <div class="col-sm-4" style="opacity:0.2">
                                <i class="fa fa-hourglass-2 fa-spinner fa-5x" style="color: green" aria-hidden="true"></i>
                            </div>

                            <div class="col-sm-8 text-center" style="font-size:20px">
                                <h5>等待执行数</h5>
                                <h1 class="no-margins"><span th:text="${taskStatistics.waitNum}"></span></h1>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content box-success-bg">
                        <div class="row">
                            <div class="col-sm-4" style="opacity:0.2">
                                <i class="fa fa-warning fa-5x"  style="color: yellow"  aria-hidden="true"></i>
                            </div>
                            <div class="col-sm-8 text-center" style="font-size:20px">
                                <h5>强制停止数</h5>
                                <h2 class="no-margins"><span th:text="${taskStatistics.forcedStopNum}"></span></h2>

                            </div>
                        </div>


                    </div>
                </div>
            </div>

            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content box-success-bg">
                        <div class="row">
                            <div class="col-sm-4" style="opacity:0.2">
                                <i class="fa  fa-remove   fa-5x" style="color: red" aria-hidden="true"></i>
                            </div>

                            <div class="col-sm-8 text-center" style="font-size:20px">
                                <h5>任务失败数</h5>
                                <h2 class="no-margins"><span th:text="${taskStatistics.failNum}"></span></h2>

                            </div>
                        </div>

                    </div>
                </div>
            </div>


            <div class="col-sm-2">
                <div class="ibox">
                    <div class="ibox-content box-success-bg">
                        <div class="row">
                            <div class="col-sm-4" style="opacity:0.2">
                                <i class="fa fa-reorder fa-5x" aria-hidden="true"></i>
                            </div>
                            <div class="col-sm-8 text-center" style="font-size:20px">
                                <h5>总任务数</h5>
                                <h1 class="no-margins"><span th:text="${taskStatistics.totalNum}"></span></h1>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>trans任务图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="pie-chart-trans"></div>
                    </div>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>job任务图</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="graph_flot.html#">选项1</a>
                                </li>
                                <li><a href="graph_flot.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="pie-chart-job"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: peity-js" />
    <th:block th:include="include :: sparkline-js" />
    <th:block th:include="include :: echarts-js" />
    <script type="text/javascript">
        var prefix = ctx + "kettle/index";
        function taskFuncation(url) {
            var config = {
                url: url,
                type: "post",
                dataType: "json",
                data: {},
                success: function(result) {
                    transPie(result.trans);
                    jobPie(result.job)
                }

            };
            $.ajax(config)
        }

	    $(document).ready(function () {
            var url =  prefix+"/task";
            taskFuncation(url);
        });


        function transPie(data){
            var pieChartTrans = echarts.init(document.getElementById("pie-chart-trans"));
            var pieOptionTrans = {
                title : {
                    text: 'trans任务统计',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:["执行成功","正在执行","执行失败","等待执行","强行停止"]
                },
                calculable : true,
                series : [
                    {
                        name:'数据来源',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data: data
                    }
                ]
            };
            pieChartTrans.setOption(pieOptionTrans);
            $(window).resize(pieChartTrans.resize);
        }

        function jobPie(data) {

            var pieChartJob = echarts.init(document.getElementById("pie-chart-job"));
            var pieOptionJob = {
                title : {
                    text: 'job任务统计',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['执行成功','正在执行','执行失败','等待执行','强行停止']
                },
                calculable : true,
                series : [
                    {
                        name:'数据来源',
                        type:'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data: data

                    }
                ]
            };
            pieChartJob.setOption(pieOptionJob);
            $(window).resize(pieChartJob.resize);

	    };

        $(function() {
            var options = {
                url: ctx + "kettle/executeLog/list",
                updateUrl: ctx + "kettle/executeLog/detail/{id}",
                modalName: "任务执行日志",
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'id',
                        title: '日志id',
                        visible: false
                    },
                    {
                        field: 'taskName',
                        title: '任务名称'
                    },

                    {
                        field: 'taskType',
                        title: '任务类型',
                        formatter: function (value, row, index) {
                            if(row.taskType == 1){
                                return "trans";
                            }else {
                                return "job";
                            }
                        }
                    },
                    {
                        field: 'startTime',
                        title: '开始时间'
                    },
                    {
                        field: 'endTime',
                        title: '结束时间'
                    },
                    {
                        field: 'executionMethod',
                        title: '执行方式'
                    },
                    {
                        field: 'status',
                        title: '状态',
                        formatter: function (value, row, index) {
                            return statusTools(row);
                        }
                    },

                    {
                        field: 'taskGroup',
                        title: '任务组',
                        visible: false

                    },

                    {
                        field: 'remark',
                        title: '备注'
                    },
                    {
                        title: '操作',
                        align: 'center',
                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="$.operate.detailTask(\'' + row.id + '\')"><i class="fa fa-edit"></i>明细</a> ');
                            return actions.join('');
                        }
                    }]
            };
            $.table.init(options);
        });

        function statusTools(row) {
            var flag = row.status;

            /**
             * 1 : 待执行
             2 : 执行中

             3 : 执行成功
             4 : 执行失败
             5 : 强制停止

             */
            if(flag == 1) {
                return '<i class="fa fa-clock-o" title="等待执行"></i>';
            } else if(flag == 2) {
                return '<i class="fa fa-spin fa-cog " style="color: green"  title="执行中"></i>';
            } else if(flag == 4) {
                return '<i class="fa fa-remove" aria-hidden="true" style="color: red"  title="执行失败" ></i>';
            } else if(flag == 5) {

                return '<i class="fa fa-warning" style="color: red" title="用户手动关闭"></i>';
            }else  if(flag == 3){
                return '<i class="fa  fa-check-circle" style="color: green" title="执行成功"></i>';
            }
        }

    </script>
</body>
</html>